<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from 'vue'

// 获取全局属性中的Socket实例
const { proxy } = getCurrentInstance()
const socket = proxy.$socket

// 厨房设备状态数据
const kitchenDevices = ref([])
const errorMessage = ref('')
const loading = ref(false)

// 获取厨房设备列表
const getKitchenDevices = async () => {
  try {
    loading.value = true
    const response = await fetch('http://localhost:3000/api/device-status')
    if (!response.ok) throw new Error('Failed to fetch kitchen devices')
    const data = await response.json()
    kitchenDevices.value = data.filter(device => device.deviceType === 'kitchenDevice')
  } catch (error) {
    errorMessage.value = error.message
    setTimeout(() => errorMessage.value = '', 3000)
  } finally {
    loading.value = false
  }
}

// 生命周期钩子：组件挂载时
onMounted(() => {
  getKitchenDevices()

  // 监听厨房设备状态更新
  socket.on('kitchenStatusUpdated', (status) => {
    const index = kitchenDevices.value.findIndex(device => device.deviceId === status.deviceId)
    if (index !== -1) {
      kitchenDevices.value[index] = status
    } else {
      kitchenDevices.value.push(status)
    }
  })
})
</script>

<template>
  <div class="kitchen-monitor">
    <h2>Kitchen Monitor</h2>

    <!-- 错误提示 -->
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading">Loading kitchen devices...</div>

    <!-- 厨房设备列表 -->
    <div v-else-if="kitchenDevices.length > 0" class="device-list">
      <div v-for="device in kitchenDevices" :key="device.deviceId" class="device-card">
        <div class="device-name">{{ device.deviceId }}</div>
        <div class="device-status">
          <div v-if="device.status.waterUsage">
            <span>Water Usage: </span>
            <span>{{ device.status.waterUsage }} liters</span>
          </div>
          <div v-if="device.status.isRunning">
            <span>Status: </span>
            <span :class="device.status.isRunning ? 'running' : 'stopped'">{{ device.status.isRunning ? 'Running' : 'Stopped' }}</span>
          </div>
          <div v-if="device.status.temperature">
            <span>Temperature: </span>
            <span>{{ device.status.temperature }}°C</span>
          </div>
          <div class="last-updated">
            <span>Last Updated: </span>
            <span>{{ new Date(device.lastUpdated).toLocaleString() }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="no-data">
      No kitchen devices found
    </div>
  </div>
</template>

<style scoped>
.kitchen-monitor {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.device-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.device-card {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.device-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2c3e50;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.device-status {
  margin-top: 10px;
}

.device-status > div {
  margin-bottom: 8px;
}

.running {
  color: #2ecc71;
  font-weight: bold;
}

.stopped {
  color: #e74c3c;
  font-weight: bold;
}

.last-updated {
  margin-top: 15px;
  font-size: 12px;
  color: #7f8c8d;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #666;
}

error-message {
  color: #ff4444;
  background-color: #ffeeee;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
  text-align: center;
}
</style>